<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8 />
	<title>Shift Belle Nuit timecodes</title>
	<link rel="stylesheet" type="text/css" media="screen" href="../../css/creative-suite.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>  
	<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]--> 
	<script type="text/javascript" src="../../js/common.js"></script>
	<script type="text/javascript" src="timecode-shifter.js"></script>
</head>
<body> 

	<h1>Shift Belle Nuit timecodes</h1> 
	
	<div class="secondary toolbar">
		<div class="bar-content">  		
			<div class="buttons-container" style="float:none;overflow:hidden">			
				<!-- left side elements -->
				<div class="buttons step1" style="float:left;width:50%">
					<a class="button btn-loadDefaults" href="#"><span>load defaults</span></a> 
				</div>
				<div class="buttons step2" style="float:left;width:50%">
					<a class="button btn-back" href="#"><span>&laquo; Back</span></a> 
				</div>
				
				<!-- right side elements -->
				<div class="buttons step1" style="float:right;width:50%">
					<a style="float:right" class="button proceed" href="#"><span>Apply time shifting &raquo;</span></a> 
					<div style="float:right;position:relative;top:-2px">
						<input type="text" id="offset_pre" name="pre" value="-" maxlength="1" title="+ or -">:
						<input type="text" id="offset_hh" name="hh" value="00" maxlength="2">:
						<input type="text" id="offset_mm" name="mm" value="00" maxlength="2">:
						<input type="text" id="offset_ss" name="ss" value="00" maxlength="2">:
						<input type="text" id="offset_ms" name="ms" value="00" maxlength="2">  
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<table>
		<tr>
		
			<td class="step1 input">
				<div class="panel">
					<h3>Input</h3>
			 		<div class="panel-content">
						<textarea></textarea>
						<div class="clear buttons" style="width: 43px; margin: 3px auto;">
							<a class="button clear-textarea"><span>clear</span></a>
						</div>
					</div>
				</div>
			</td>  
			
			<td class="step2 input">
				<div class="panel">
					<h3>Input</h3>
			 		<div class="panel-content">
						<textarea></textarea> 
						<div class="clear buttons" style="width: 43px; margin: 3px auto;">
							<a class="button clear-textarea"><span>clear</span></a>
						</div>
					</div>
				</div>
			</td> 
			
			<td class="step2 output">
				<div class="panel">
					<h3>Output</h3>
			 		<div class="panel-content">
						<textarea></textarea> 
						<div class="clear buttons" style="width: 43px; margin: 3px auto;">
							<a class="button clear-textarea"><span>clear</span></a>
						</div>
					</div>
				</div>
			</td>  
			
		</tr>
	</table> 
	 
</body>
</html>